<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/arrange' }">安排管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/arrange/addarrange">添加安排</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-loading="VLoading" class="describe">
      <el-descriptions class="margin-top" title="添加安排" :column="3" border>
        <template #extra>
          <el-button @click="Asave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排名</div>
          </template>
          <el-input v-model="Aname" placeholder="请输入安排名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排类型</div>
          </template>
          <el-select v-model="Atype" placeholder="安排类型">
            <el-option label="普通安排" value=1 />
            <el-option label="培训班安排" value=2 />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">用户名</div>
          </template>
          <el-select v-model="uname" multiple collapse-tags placeholder="请选择用户" size="large">
            <el-option v-for="item in unames" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">考试名</div>
          </template>
          <el-input v-model="Kname" placeholder="请输入考试名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷名</div>
          </template>
          <el-select v-model="tpname" collapse-tags placeholder="请选择试卷" size="large">
            <el-option v-for="item in tpnames" :key="item.tpid" :label="item.tpname" :value="item.tpid" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item v-if="Atype == '2'">
          <template #label>
            <div class="cell-item">培训班名</div>
          </template>
          <el-select v-model="select2" collapse-tags placeholder="培训班名" size="large">
            <el-option v-for="item in TName" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item v-if="Atype == '1'">
          <template #label>
            <div class="cell-item">安排组织</div>
          </template>
          <el-cascader ref="myCader" placeholder="请选择组织" :options="options" @change="Orgs" :props="props" collapse-tags
            clearable>
          </el-cascader>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">开始时间</div>
          </template>
          <el-date-picker v-model="begintime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">结束时间</div>
          </template>
          <el-date-picker v-model="endtime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否需要阅卷</div>
          </template>
          <el-switch v-model="goover" class="ml-2" style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            " />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">安排描述</div>
          </template>
          <el-input v-model="aexplain" :rows="2" type="textarea" placeholder="安排描述" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { AddArrange } from "@/utils/Exam/arrange/addArrange";
import router from "@/router";
import { GetArranges, TaskPaper } from "@/api/Product/exaam";
import { OrganizationProduct, UserProduct } from '@/api/Product/index'
import { ElMessage } from "element-plus";
import { Label } from "@icon-park/vue-next/es/map";

const _exam = new GetArranges();
const _arrang = new OrganizationProduct();
const _taskpaper = new TaskPaper();
const _user = new UserProduct();

export default defineComponent({
  setup() {
    const myCader = ref([]);
    const data = reactive<AddArrange>({
      Atype: "1",
      Aname: "",
      Kname: "",
      tpname: "",
      uname: [],
      unames: [],
      tpnames: [],
      QName: [
        {
          value: "1",
          label: "月考",
        },
        {
          value: "2",
          label: "中考",
        },
        {
          value: "3",
          label: "模考",
        },
        {
          value: "4",
          label: "末考",
        },
      ],
      TName: [],
      options: [],
      oids: [],
      select1: "",
      select2: "",
      goover: true,
      begintime: "",
      endtime: "",
      OName: "",
      props: { multiple: true },
      children: [],
      orgs: [],
      aexplain: "",
      VLoading: false
    });
    const methods = {
      GetTraining() {
        _exam.GetTraining({ isOver: 0 }).then((res: any) => {
          if (res.code === 1) {
            data.TName = res.data.data
          }
        });
      },
      GetArarnge() {
        _arrang.GetOrganization().then((res: any) => {
          if (res.code === 0) {
            res.data.forEach((e: any) => {
              data.options.push({
                value: e.id,
                label: e.name,
                children: data.children
              });
              e.children.forEach((d: any) => {
                data.children.push({
                  value: d.id,
                  label: d.name
                });
              })
            });
          }
        })
      },
      GetTaskPaper() {
        _taskpaper.GetTaskPaper({}).then((res: any) => {
          if (res.code === 0) {
            data.tpnames = res.data.data
          }
        })
      },
      GetUser() {
        _user.GetUser({
          page: 1,
          limit: 100,
          key: '',
          isBan: 1,
          isActive: 1
        }).then((res: any) => {
          if (res.code === 0) {
            data.unames = res.data.data
          }
        })
      },
      Orgs(val: any) {
        data.orgs = [];
        val.forEach((d: any) => {
          d.forEach((e: any) => {
            data.orgs.push(e)
          });
        });
      },
      unique10() {
        return Array.from(new Set(data.orgs))
      },
      Asave() {
        data.VLoading = true
        let name = "";
        data.uname.forEach((e: any) => {
          name += e + ","
        });
        name = name.substring(0, name.length - 1);
        let orgids = "";
        methods.unique10().forEach((d: any) => {
          orgids += d + ",";
        });
        orgids = orgids.substring(0, orgids.length - 1);
        const dto = {
          atpid: data.tpname,
          arelationid: data.select2,
          aname: data.Aname,
          aorgids: orgids,
          aexplain: data.aexplain,
          auids: name,
          atype: Number(data.Atype),
          aischeck: data.goover == true ? 1 : 0,
          abegintime: data.begintime.replace(' ', 'T'),
          aendtime: data.endtime.replace(' ', 'T')
        }
        _exam.AddArrange(dto).then((res: any) => {
          if (res.code === 0) {
            data.VLoading = true
            ElMessage.success(res.message);
            router.push("/arrange")
          } else {
            ElMessage.success(res.message);
          }
        })
      },
    };
    onMounted(() => {
      methods.GetArarnge();
      methods.GetTraining();
      methods.GetTaskPaper();
      methods.GetUser();
    })
    return {
      ...toRefs(data),
      ...methods,
      myCader
    };
  },
});
</script>
<style scoped>
/* .box {
  background-color: azure;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  padding-top: 10px;
} */
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
</style>
